<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投诉</title>
    <link rel="stylesheet" href="/js/element-ui/index.css">
    <style>

    </style>
</head>
<body>
<div id="complain">
    <template>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="本人ID" prop="userid">
                <el-input v-model="ruleForm.userid" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="被投诉对象" prop="complainType">
                <el-select v-model="ruleForm.complainType" placeholder="请选择被投诉对象">
                    <el-option label="学生" value="student"></el-option>
                    <el-option label="老师" value="teacher"></el-option>
                    <el-option label="视频" value="video"></el-option>
                    <el-option label="课程" value="course"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="被投诉ID" prop="complainId" style="width: 300px;">
                <el-input v-model="ruleForm.complainId"></el-input>
            </el-form-item>
            <el-form-item label="投诉内容" prop="content" style="width: 300px;">
                <el-input type="textarea" v-model="ruleForm.content"></el-input>
            </el-form-item>
            <el-form-item label="投诉时间" prop="time" style="width: 300px;">
                <el-input type="textarea" v-model="ruleForm.time"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提  交</el-button>
                <el-button @click="resetForm('ruleForm')">重 置</el-button>
            </el-form-item>
        </el-form>
    </template>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/element-ui/index.js"></script>
<script>
    new Vue({
        el:'#complain',
        data() {
            return {
                ruleForm: {
                    userid: '',
                    complainType: '',
                    complainId:'',
                    content: '',
                    time:'',
                },
                rules: {
                    userid: [
                        { required: true, message: '请输入本人ID', trigger: 'blur' },
                    ],
                    complainType: [
                        { required: true, message: '请选择要投诉的对象类型', trigger: 'change' }
                    ],
                    complainId: [
                        { required: true, message: '请输入要投诉的对象ID', trigger: 'blur' },
                    ],
                    content: [
                        { required: true, message: '请填写投诉内容', trigger: 'blur' }
                    ],
                    time: [
                        { required: true, message: '请填写投诉时间', trigger: 'blur' }
                    ]
                },

            };
        },
        methods: {
            submitForm() {
                let ruleForm = this.ruleForm;
                console.log(ruleForm);
                axios.post('/complain/submit',ruleForm).then(response=>{
                    let flag = response.data.flag;
                    if (flag == true){
                        alert("投诉成功")
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>

</body>
</html>